<template>
  <el-menu
    :collapse-transition="true"
    default-active
    :unique-opened="true"
    id="el-menu-vertical"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <!-- 导航栏伸展控制按钮 -->
    <el-menu-item>
      <el-button link v-if="isCollapse" @click="isCollapse = false">
        <el-tooltip content="点击展开导航栏" placement="right">
          <el-icon>
            <Open />
          </el-icon>
        </el-tooltip>
      </el-button>
      <el-button link v-else @click="isCollapse = true">
        <el-icon>
          <TurnOff />
        </el-icon>
        <span>点击收缩</span>
      </el-button>
    </el-menu-item>
    <!-- 首页 -->
    <el-menu-item
      :index="routerPath.home"
      :class="route.path === '/allview' ? 'is-active' : ''"
    >
      <el-icon>
        <House />
      </el-icon>
      <template #title>
        <span>首页</span>
      </template>
    </el-menu-item>
    <!-- 文件总导航栏 -->
    <el-menu-item-group index="1">
      <el-sub-menu index="1-1">
        <template #title>
          <el-icon>
            <Menu />
          </el-icon>
          <span>文件</span>
        </template>
        <!-- 文件总导航栏=>图片导航按钮 -->
        <el-menu-item :index="routerPath.imgview">
          <el-icon>
            <Picture />
          </el-icon>
          图片
        </el-menu-item>
        <!-- 文件总导航栏=>文档导航按钮 -->
        <el-menu-item :index="routerPath.textview">
          <el-icon>
            <Film />
          </el-icon>
          <span>文档</span>
        </el-menu-item>
        <!-- 文件总导航栏=>视频导航按钮 -->
        <el-menu-item :index="routerPath.vedioview">
          <el-icon>
            <VideoCamera />
          </el-icon>
          <span>视频</span>
        </el-menu-item>
        <!-- 文件总导航栏=>音频导航按钮 -->
        <el-menu-item :index="routerPath.music"
          ><el-icon>
            <VideoPlay />
          </el-icon>
          <span>音频</span>
        </el-menu-item>
        <el-menu-item :index="routerPath.other">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>其他</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu-item-group>
    <!-- 收集模块总导航栏 -->
    <!-- <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <Collection />
        </el-icon>
        <span>收集</span>
      </template>
      <el-menu-item-group>
        <template #title>
          <span>收集</span>
        </template>
        <el-menu-item :index="routerPath.reqInfo">
          <el-icon>
            <DataLine />
          </el-icon>
          <span>求资料</span>
        </el-menu-item>
        <el-menu-item :index="routerPath.collFile">
          <el-icon>
            <MessageBox />
          </el-icon>
          <span>远程收集文件</span>
        </el-menu-item>
        <el-menu-item :index="routerPath.collHW">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>收作业</span>
        </el-menu-item>
        <el-menu-item index="2-4-1" disabled>
          <el-icon>
            <More />
          </el-icon>
          <span>更多</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu> -->
    <!-- 日历导航按钮 -->
    <!-- <el-menu-item :index="routerPath.collHW">
      <el-icon>
        <Connection />
      </el-icon>
      <template #title>
        <span>收作业</span>
      </template>
    </el-menu-item> -->

    <el-menu-item :index="routerPath.calendar">
      <el-icon><Calendar /></el-icon>
      <template #title>日历</template>
    </el-menu-item>
    <el-menu-item :index="routerPath.sharedFiles">
      <el-icon>
        <Share />
      </el-icon>
      <template #title>
        <span>已分享</span>
      </template>
    </el-menu-item>
    <!-- 设置导航按钮 -->
    <el-menu-item :index="routerPath.settingPerson">
      <el-icon>
        <Avatar />
      </el-icon>
      <template #title>
        <span>个人主页</span>
      </template>
    </el-menu-item>
    <el-menu-item :index="routerPath.recovery">
      <el-icon>
        <Delete />
      </el-icon>
      <template #title>
        <span>回收站</span>
      </template>
    </el-menu-item>

    <el-menu-item index="4" disabled>
      <el-icon>
        <document />
      </el-icon>
      <template #title>不可操作</template>
    </el-menu-item>
    <el-menu-item :index="routerPath.collectTask">
      <el-icon>
        <Collection />
      </el-icon>
      <template #title>
        <span>任务中心</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { TurnOff, Open } from '@element-plus/icons-vue'
const route = useRoute()
// 导航栏展开行为
const isCollapse = ref(true)
const handleOpen = () => {
  // console.log(key, keyPath)key, keyPath
}
const handleClose = () => {
  // console.log(key, keyPath)key, keyPath
}
//路由跳转
const routerPath = ref({
  home: '/allview',
  calendar: '/calendar',
  imgview: '/imgview',
  textview: '/textview',
  vedioview: '/vedioview',
  music: '/music',
  collect: '/collect',
  other: '/otherview',
  reqInfo: '/reqInfo',
  collHW: '/collHW',
  collFile: '/collFile',
  recovery: '/recovery',
  settingPerson: '/SettingPerson',
  sharedFiles: '/sharedFiles',
  collectTask: '/collectTask'
})
</script>

<style lang="scss">
.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}

/* 左边主导航栏伸缩 */
#home_aside {
  width: auto;
  // margin-top: 10px;
  // box-shadow: 0px 0px 10px silver;
  // border-radius: 0 20px 20px 0;
  height: calc(100vh - var(--el-header-height));
  overflow: hidden;
}
#el-menu-vertical:not(.el-menu--collapse) {
  width: 170px;
}
#el-menu-vertical {
  border: 0;
}

/* 图标样式 */
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 导航栏图标大小 */
</style>
